<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <body>

        <ui:composition template="./template.xhtml">

            <ui:define name="title">
                Quản trị người dùng
            </ui:define>

            <ui:define name="content">
                <h:form id="inputForm">
                    <p:panel>
                        <table border="0" cellspacing="5">
                            <tbody>
                                <tr>
                                    <td style="vertical-align: top">
                                        <h:panelGrid columns="2">
                                            Tên đăng nhập  
                                            <p:inputText value="#{omapUserBean.selected.username}" rendered="#{!omapUserBean.edit}"/>
                                            <h:outputText value="#{omapUserBean.selected.username}" rendered="#{omapUserBean.edit}"/>
                                            Mật khẩu <p:password value="#{omapUserBean.password}" feedback="true"/>
                                            Xác nhận mật khẩu <p:password value="#{omapUserBean.confirmPassword}" feedback="false"/>
                                            Mô tả <p:inputTextarea value="#{omapUserBean.selected.comments}"/>
                                            Họ tên <p:inputText value="#{omapUserBean.selected.fullName}" />
                                            Email <p:inputText value="#{omapUserBean.selected.email}" />
                                            Số ĐTDĐ <p:inputText value="#{omapUserBean.selected.mobile}" />
                                        </h:panelGrid>
                                    </td>
                                    <td style="vertical-align: top">
                                        <h:panelGrid columns="2">
                                            Đã xác nhận <p:selectBooleanCheckbox value="#{omapUserBean.selected.BApproved}"/>
                                            Bị khóa <p:selectBooleanCheckbox value="#{omapUserBean.selected.BLocked}"/>
                                            Nhóm
                                            <p:selectManyMenu value="#{omapUserBean.selected.omapRoleList}" converter="#{omapRoleConverter}">
                                                <f:selectItems value="#{omapRoleBean.list}" var="item" 
                                                               itemLabel="#{item.roleName}" itemValue="#{item}"/>
                                            </p:selectManyMenu>
                                        </h:panelGrid>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                        <h:panelGrid columns="5">
                            <p:commandButton update="inputForm tableForm" value="Thêm mới" rendered="#{!omapUserBean.edit}" action="#{omapUserBean.create()}"/>
                            <p:commandButton update="inputForm tableForm" value="Cập nhật" rendered="#{omapUserBean.edit}" action="#{omapUserBean.edit()}"/>
                            <p:commandButton update="inputForm tableForm" value="Xóa" rendered="#{omapUserBean.edit}" action="#{omapUserBean.remove()}">
                                <f:param name="id" value="#{omapUserBean.selected.userId}"/>
                            </p:commandButton>
                            <p:commandButton ajax="false" value="Hủy bỏ" immediate="true" action="#{omapUserBean.resetToCreateForm()}"/>
                        </h:panelGrid>
                    </p:panel>
                </h:form>

                <br/>
                
                <h:form id="tableForm">
                    <p:dataTable value="#{omapUserBean.list}" var="item" paginator="#{omapUserBean.list.size() >20}" rows="20" >
                        <p:column headerText="Tên đăng nhập" sortBy="#{item.username}">
                            #{item.username}
                        </p:column>
                        <p:column headerText="Họ tên" sortBy="#{item.fullName}">
                            #{item.fullName}
                        </p:column>
                        <p:column headerText="Email" sortBy="#{item.email}">
                            #{item.email}
                        </p:column>
                        <p:column headerText="Mobile" sortBy="#{item.mobile}">
                            #{item.mobile}
                        </p:column>
                        <p:column headerText="Đã xác nhận" sortBy="#{item.approved}">
                            #{item.approved}
                        </p:column>
                        <p:column headerText="Bị khóa" sortBy="#{item.locked}">
                            #{item.locked}
                        </p:column>
                        <p:column headerText="Nhóm">
                            <ui:repeat value="#{item.omapRoleList}" var="role">
                                #{role.roleName} <br/>
                            </ui:repeat>
                        </p:column>
                        
                        <p:column headerText="Xử lý">
                            <p:commandButton ajax="false" title="Chỉnh sửa" icon="ui-icon ui-icon-pencil" action="#{omapUserBean.prepareEdit()}">
                                <f:param name="id" value="#{item.userId}"/>
                            </p:commandButton>
                            <p:commandButton ajax="false" title="Xóa" icon="ui-icon ui-icon-close" action="#{omapUserBean.remove()}">
                                <f:param name="id" value="#{item.userId}"/>
                            </p:commandButton>

                        </p:column>
                    </p:dataTable>
                </h:form>
            </ui:define>

        </ui:composition>

    </body>
</html>
